前言

在之前，在範例中會使用雙括號 {{}}，做最最最最最最基本的資料綁定。
ex:

<span>Message: {{ msg }}</span>

　但 {{}} 無法用在 HTML 屬性中，若要在元素的屬性中使用需透過 v-bind

ex:

<div v-bind:id="dynamicId"></div>

以下會介紹常用在模板中的指令，讓我們能更輕鬆的控制 DOM ！

指令 Directive

是一種特別的屬性，以 v- 為前綴詞，directive 的作用是當狀態或值改變時，替我們去更新 DOM ！

ex:

<p v-if="seen">Now you see me</p>

根據 seen 值，決定是否要置入 p元素

而有些 directive 可傳入參數 (argument)，以冒號方式接在 directive 後方。
ex:

<a v-bind:href="url"> ... </a>
// 可縮寫成 <a :href="url"> ... </a>

v-bind 綁定href屬性到元素上。

ex:

<a v-on:click="doSomething"> ... </a>
<!-- 可縮寫成 <a @click="doSomething"> ... </a> -->

v-on 用來監聽 DOM 事件，傳入的參數就監聽的事件名稱

將 Directive 做分類，以下介紹:

1. 模板/內容綁定
2. 條件渲染
3. 列表渲染

模板/內容綁定

v-text

更新元素的 textContent
ex:

<span v-text="msg"></span>
<!-- 等同於 -->
<span>{{msg}}</span>

v-html

更新元素的innerHTML，在網站動態的置入 HTML 要非常小心有XSS 攻擊。

條件渲染

v-if & v-else & v-else-if

根據條件式來決定顯示的區塊。
ex:

<h1 v-if="awesome">Vue is awesome!</h1>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

因為 v-if 只能使用在單一元素上，如果要控制多個元素的顯示，可以在<template>上使用v-if
ex:

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

使用display來控制元素的顯示，不同於　v-if 是整個元素都移除，而 v-show 無法用在<template>上。

列表渲染

使用 v-for去渲染列表中的項目。
ex:

<!-- items 是 data 中的陣列資料-->
<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<!-- 也可取用到項目的 index -->
<ul id="array-with-index">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

v-for 也可用來遍歷物件。

ex:

<ul id="v-for-object" class="demo">
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}).mount('#v-for-object')

和陣列一樣，也可以取得物件的屬性

<li v-for="(value, name) in myObject">
  {{ name }}: {{ value }}
</li>

補充

Vue 預設使用 in-place patch 的方式，也就是如果陣列或是物件中的項目順序改變，Vue為了效能，不會去移動 DOM 元素，只會更新元素的內容。
為了讓 Vue 可以追蹤每一個節點，讓我們可以去重複使用或是重新排列已存在的元素，會使用 key屬性，讓節點可被識別。(給一個唯一識別的值，身分證)
ex:

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

下篇預告

• directive 續

每日一句:
連假已過 50%，哀傷 100 %